<template>
    <div class="page-register-step">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="phone" 
                :formatter="formatterPhone"
                maxlength="11"
                placeholder="请输入手机号码"
                    :rules="[{ required: true, message: '请填写手机号码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button  :disabled="phoneButtonIsDisabled" round block type="primary" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
    import { useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useRegisterStore } from "@/stores/register";
    const registerStore = useRegisterStore();
    //不要直接对store实例做解构赋值,因为这个store实例是一个proxy,会失去响应式
    // const { } = useRegisterStore
    //正确的做法是：toEef.storeToRefs
    const { phone,phoneButtonIsDisabled } = storeToRefs(registerStore)

    // 输入框格式化函数
    const formatterPhone = (value:string)=>{
        return value.replace(/[a-z]/g,"")
    }

    // 提交
    const router = useRouter();
    const onSubmit = async ()=>{
        await registerStore.oneSubmit()
        // 到这里一切都没问题的话,在这处理路由跳转
        console.log('ok')
        router.push({name:"step-2"})
    };
</script>